<template>
  <el-dialog
    width="300px"
    :modal="false"
    title="打印订单"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm"  ref="dataForm"  id="pirntData" >
      <el-form-item label="订单编号">
        <span class="text">{{dataForm.orderNumber}}</span>
      </el-form-item>

      <el-form-item label="备注">
        <span class="text">{{dataForm.remarks}}</span>
      </el-form-item>

      <div class="item-list">
        <el-table   :data="dataForm.orderItems"
                    :row-style="{height:'10px'}"
                    :cell-style="{padding:'0px'}"
                    style="font-size: 14px; font-weight: bold" >
          <el-table-column :show-overflow-tooltip="true" prop="" label="商品"  width="120">
            <template slot-scope="scope" >
              <span>{{scope.row.prodName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" width="60" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.price}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="数量" width="60" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.prodCount}}</span>
            </template>
          </el-table-column>
<!--          <el-table-column prop="productTotalAmout" label="总价" width="60" align="center">-->
<!--            <template slot-scope="scope">-->
<!--              <span>{{scope.row.productTotalAmount}}</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
      </div>
      <div class="item-info">
        <el-form-item label="商品总价:">
          <span class="text">￥{{dataForm.total}}</span>
        </el-form-item>

      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="visible = false, printTest()">打印</el-button>
    </span>
  </el-dialog>
</template>
<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          orderNumber: 0,
          orderItems: [],
          remarks:'',
          total:''
        }
      }
    },
    methods: {
      initPrint (orderNumber, orderItems, remarks, total) {
        this.visible = true
        this.dataForm.orderNumber = orderNumber || ''
        this.dataForm.orderItems = orderItems || []
        this.dataForm.remarks = remarks || ''
        this.dataForm.total = total || ''
      },
      printTest() {
        var newWin = window.open(""); //新打开一个空窗口
        var imageToPrint = document.getElementById("pirntData"); //将要被打印的图片
        newWin.document.write(imageToPrint.outerHTML); //将图片添加进新的窗口
        newWin.document.close(); //在IE浏览器中使用必须添加这一句
        newWin.focus(); //在IE浏览器中使用必须添加这一句
        newWin.print(); //打印
        newWin.close(); //关闭窗口
      }
    }
  }
</script>

<style>
  .text {
    font-size: 14px;
    color: #8a8a8a;
  }
  .item-info {
  }

  .text {
    position: absolute;
    right: 0;
  }

</style>
